import React from 'react';
import { Card, Form, Input, InputNumber, Select, Table } from 'antd';
import SearchForm from '../../components/AutoForm/SearchForm';
import { connect } from 'dva';
import moment from 'moment';
import {getAuthority} from "../../utils/authority";
import {baseServerUrl} from "../../utils/Constant";
import {stringify} from "qs";

@connect(({ costReport, loading }) => ({
  tableLoading: loading.effects['costReport/page'],
  tableData: costReport.childrenTable,
}))
class chlidrenTable extends React.Component {
  render() {
    return super.render();
  }
}

@connect(({ costReport, loading }) => ({
  tableLoadingC: loading.effects['costReport/page'],
  tableDataC: costReport.childrenTable,
  columnsC: costReport.columnsChlidren,

  tableLoading: loading.effects['costReport/page'],
  tableData: costReport.pageList,
  pagination: costReport.pagination,
  columns: costReport.columns,
  searchFields: costReport.searchFields,
  searchValues: costReport.searchValues,
}))
class EditableTable extends React.Component {
  componentDidMount() {
    this.handleSearch();
  }

  expandedRowRender = record => {
    const { columnsC } = this.props;
    return <Table size="small" columns={columnsC} dataSource={record.orders} pagination={false} />;
  };

  handleSearchChange = fields => {
    const { dispatch } = this.props;
    dispatch({
      type: 'costReport/handleSearchChange',
      payload: fields,
    });
  };

  handleSearch = (flag) => {
    const { dispatch, pagination, searchValues } = this.props;
    let pageParam = { pageSize: pagination.pageSize, current: flag==='btn' ? 1 : pagination.current };
    let searchParam = {};
    Object.keys(searchValues).map(key => {

      if (key === 'createTimeArray') {
        const dateArray = searchValues[key]['value'];
        if (dateArray && dateArray.length) {
          let startTime = moment(dateArray[0]);
          let endTime = moment(dateArray[1]);
          searchParam[key] = [];
          searchParam[key].push(startTime.format('YYYY-MM-DD HH:mm:ss'));
          searchParam[key].push(endTime.format('YYYY-MM-DD HH:mm:ss'));
        }
      }else{
        searchParam[key] = searchValues[key]['value'];
      }
    });
    const param = {
      ...searchParam,
      ...pageParam,
    };
    dispatch({
      type: 'costReport/page',
      payload: param,
    });
  };

  handleDownload = () => {
    const { searchValues } = this.props;
    let searchParam = {};
    Object.keys(searchValues).map(key => {
      searchParam[key] = searchValues[key]['value'];
      if (key === 'createTimeArray') {
        const dateArray = searchValues[key]['value'];
        if (dateArray.length) {
          let startTime = moment(dateArray[0]);
          let endTime = moment(dateArray[1]);
          searchParam[key] = [];
          searchParam[key].push(startTime.format('YYYY-MM-DD HH:mm:ss'));
          searchParam[key].push(endTime.format('YYYY-MM-DD HH:mm:ss'));
        }
      }
    });
    searchParam.token = getAuthority();
    window.open(`${baseServerUrl}/tms/report/costExport?${stringify(searchParam)}`);
  };

  render() {
    const {
      columns,
      pagination,
      tableLoading,
      tableData,
      searchFields,
      searchValues,
      dispatch,
    } = this.props;

    pagination.onChange = (page, pageSize) => {
      let searchParam = {};
      Object.keys(searchValues).map(key => {
        searchParam[key] = searchValues[key]['value'];
      });
      dispatch({
        type: 'costReport/page',
        payload: {
          ...searchParam,
          current: page,
          pageSize,
        },
      });
    };
    pagination.onShowSizeChange = (current, size) => {
      let searchParam = {};
      Object.keys(searchValues).map(key => {
        searchParam[key] = searchValues[key]['value'];
      });
      dispatch({
        type: 'costReport/page',
        payload: {
          ...searchParam,
          current: current,
          pageSize: size,
        },
      });
    };
    return (
      <Card bodyStyle={{ padding: 0 }}>
        <SearchForm
          header="费用报表->操作"
          layout="inline"
          isDownload={true}
          onDownload={this.handleDownload}
          onFieldsChange={this.handleSearchChange}
          onSubmit={() => {this.handleSearch('btn')}}
          fields={searchFields}
          fieldValue={searchValues}
        />
        <Table
          defaultExpandAllRows={true}
          bordered
          rowKey="id"
          loading={tableLoading}
          dataSource={tableData}
          columns={columns}
          scroll={{ x: 'max-content' }}
          size="small"
          pagination={pagination}
          expandedRowRender={this.expandedRowRender}
        />
      </Card>
    );
  }
}

const EditableFormTable = Form.create()(EditableTable);
export default EditableFormTable;
